<!-- Dom模板 -->
<template>
  <div class="loginbox">
        <!-- Dom内容 -->
    <!-- 返回 -->
    <span class="iconfont icon-iconfontyoujiantou-zuo" @click="close"></span>
    <div class="header">
      <h3>登录</h3>
    </div>
    <div class="inputlogin">
      <!-- 账号 -->
      <span class="iconfont icon-shouji"></span>
      <input type="text" placeholder="账号" v-model="user" />
      <div class="alert">
        <p ref="nonullf">账号不可以为空</p>
      </div>
      <!-- 密码 -->
      <span class="iconfont icon-mima1"></span>
      <input
        type="password"
        placeholder="密码"
        v-model="pass"
        ref="passxianshi"
        v-show="passxianshi"
        class="passxianshi"
        show-password
      />
      <input
        type="text"
        placeholder="密码"
        v-model="pass"
        ref="passguanbi"
        class="passguanbi"
      />
      <!-- 显示密码 -->
      <div class="yi">
        <span class="iconfont icon-yanjing1" @click="xianshi" ref="yan"></span>
      </div>
      <div class="alert">
        <p ref="nonulls">密码不能为空</p>
      </div>
      <!-- <div class="baocun">
        <form action="" ref="form" :model="form" label-width="80px">
          <input type="checkbox" v-model="form.type" />
          <span label="记住密码" name="type">记住密码</span>
        </form>
      </div> -->
      <!-- 登录 -->
      <div class="but">
        <button class="login" @click="loginuser">登录</button>
      </div>
      <!-- 注册 -->
      <p class="register">
        没有账号？去<span @click="registeruser">注册</span>
      </p>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import { Toast } from "vant";
export default {
  components: {},
  data() {
    return {
      msg: "测试",
      user: "",
      pass: "",
      passxianshi: true,
      form: {
        type: false,
      },
      arr:[],
      usern:""
    };
  }, // 生命周期 - 创建完成（访问当前this实例）
  created() {}, // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    if (localStorage.getItem("userId")) {
      let user = JSON.parse(localStorage.getItem("user"));
      this.user = user.username;
      this.pass = user.password;
      this.form.type = true;
    }
  }, // Vue方法定义

  watch: {
    user() {
      let value = this.user.replace(/\D/g, "").substr(0, 11); // 不允许输入非数字字符，超过11位数字截取前11位
      let len = value.length;
      if (len > 3 && len < 8) {
        value = value.replace(/^(\d{3})/g, "$1 ");
      } else if (len >= 8) {
        value = value.replace(/^(\d{3})(\d{4})/g, "$1 $2 ");
      }
      this.user = value;
      this.arr=this.user.split(" ")
      
      this.usern=this.arr.join('')
    },
  },
  methods: {
    xianshi() {
      if (this.passxianshi) {
        this.passxianshi = false;
        this.$refs.yan.classList = "iconfont icon-yanjing";
        this.$refs.passxianshi.style.display = "none";
        this.$refs.passguanbi.style.display = "block";
      } else if (!this.passxianshi) {
        this.passxianshi = true;
        this.$refs.yan.classList = "iconfont icon-yanjing1";
        this.$refs.passxianshi.style.display = "block";
        this.$refs.passguanbi.style.display = "none";
      }
    },
    // 登录
    loginuser() {
      if (!this.user) {
        this.$refs.nonullf.style.display = "block";
        // alert("账号不能为空")
      } else if (!this.pass) {
        this.$refs.nonullf.style.display = "none";
        this.$refs.nonulls.style.display = "block";
        // alert("密码不能为空")
      } else {
        // 动画
        Toast.loading({
          message: "加载中...",
          forbidClick: true,
          duration: 100000,
        });
        this.$refs.nonullf.style.display = "none";
        this.$refs.nonulls.style.display = "none";
        // 登录
        this.$store
          .dispatch("login/login", { userName: this.usern, password: this.pass })
          .then((res) => {
            console.log(res);
            if (res.code === 200) {
              setTimeout(() => {
                Toast.success(res.msg);
                // console.log(this.$route.query.beforePath);
                // let path = "";
                if (this.$route.query.path) {
                  setTimeout(() => {
                    this.$router.history.go(-1);
                  }, 800);
                } else {
                  // path = "/my";
                  setTimeout(() => {
                    this.$router.history.push({
                      path: "/my",
                    });
                  }, 800);
                }
                console.log(this.$route.query.path);
                // setTimeout(() => {
                //     this.$router.history.push({
                //       path:this.$route.query.path||"/my",
                //     });
                //   }, 800);
              }, 2000);

              // 判断是否记住密码
              // if (this.form.type) {
              //   let obj = {
              //     username: res.info[0].username,
              //     password: res.info[0].password,
              //   };
              //   localStorage.setItem("user", JSON.stringify(obj));
              //   localStorage.setItem("userId", res.info[0].userid);
              // } else {
              //   localStorage.clear();
              // }

              // 是否为登录状态
              sessionStorage.setItem("userId", res.info[0].userid);
              sessionStorage.setItem("token", "yidenglu");

              this.$store.dispatch("login/getUser", {
                userid: sessionStorage.getItem("userId"),
              });
            } else if (res.code === 201) {
              setTimeout(() => {
                Toast.fail(res.msg);
              }, 1000);
            }
          });
      }
    },
    // 注册
    registeruser() {
      this.$router.history.push("/register");
    },
    // 关闭
    close() {
      // this.$router.history.push(this.$route.query.path || "/my");
      if (this.$route.query.path) {
        this.$router.history.go(-1);
      } else {
        // path = "/my";
        this.$router.history.push({
          path: "/my",
        });
      }
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
.passguanbi {
  display: none;
}
.yi {
  position: absolute;
  right: 0.453333rem;
  top: 2.133333rem;
  color: #8d8c8c;
}
.loginbox {
  width: 100vw;
  height: 100vh;
  background: white;
  background-image: linear-gradient(to bottom, #f4859f 20%, white 108%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  overflow: hidden;
}
.loginbox > span:first-of-type {
  width: 1.333333rem;
  height: 1.333333rem;
  position: absolute;
  top: 0.266667rem;
  left: 0.533333rem;
  font-size: 0.693333rem;
  color: white;
}
.loginbox .header {
  width: 100vw;
  height: 6.133333rem;
  /* background: #f33a65; */
  line-height: 8rem;
  /* border-radius: 0 0 20% 20%; */
  /* background-image: linear-gradient(to top left, #f33a65 , yellow); */
}
.loginbox .header h3 {
  width: 1.333333rem;
  height: 1.333333rem;
  text-align: center;
  font-weight: bold;
  font-size: 0.586667rem;
  margin: 0px auto;
  color: white;
}
.inputlogin {
  width: 80%;
  height: 5.333333rem;
  margin: 0.533333rem auto;
  z-index: 999;
  position: relative;
}
.inputlogin input {
  width: 100%;
  height: 1rem;
  border: none;
  outline: none;
  border-bottom: 2px solid #f3f2f2;
  color: #868686;
  padding-left: 0.826667rem;
  background: rgba(0, 0, 0, 0);
}
.icon-shouji {
  position: absolute;
  top: 0.186667rem;
  left: 0.053333rem;
  font-size: 0.533333rem;
  color: white;
}
.icon-mima1 {
  position: absolute;
  top: 1.973333rem;
  left: 0.053333rem;
  font-size: 0.693333rem;
  color: white;
}
.but {
  width: 100%;
  height: 1.066667rem;
  margin: 10px 0;
}
.login {
  width: 100%;
  outline: none;
  border: 0;
  line-height: 1.066667rem;
  color: white;
  border-radius: 0.106667rem;
  background: #f33a65;
}
.register {
  width: 45%;
  border: 0;
  line-height: 1.066667rem;
  color: #a0a0a0;
  font-family: monospace;
}
.register span {
  color: #f33a65;
}
.active {
  background: #f33a65;
}

.baocun {
  width: 100%;
  height: 1.066667rem;
}
.baocun input {
  width: 16px;
  height: 16px;
  margin-top: 10px;
  display: inline-block;
}
.baocun span {
  display: inline-block;
}
.alert {
  width: 100%;
  height: 0.853333rem;
}
.alert p {
  font-style: italic;
  display: none;
  color: #f33a65;
}
</style>
<style>
.van-toast--bottom {
  bottom: 8%;
}
</style>
